<!--
 * @Descripttion: 
 * @Author: 银河以北
 * @Date: 2023-05-22 15:11:10
 * @LastEditors: 银河以北
 * @LastEditTime: 2024-08-28 17:16:07
-->
<template>
    <div class="app-container">
        <el-button type="primary" size="large" :icon="UserFilled" @click="showForm()" v-if="showLoading">登录
        </el-button>
        <div v-else class="flex items-center">
            <div class="h-[40px] w-[40px] rounded-full mr-[10px]"><img class="w-full h-full rounded-full"
                    :src="$utils.imgUrl(userStore.userInfo.avatar_url)" alt="">
            </div>
            <div> {{ userStore.userInfo.nickname }}</div>
        </div>

        <el-dialog v-model="isShowForm" title="登录" width="300" :close-on-click-modal="false">
            <!-- 登录表单 -->
            <el-form ref="loginFormRef" status-icon :model="loginForm" :rules="loginRules" label-width="auto">
                <el-form-item label="邮箱" prop="mailbox">
                    <el-input v-model="loginForm.mailbox" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" @keyup.enter.native="postData()" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetForm()">取消</el-button>
                    <el-button :loading="loginLoading" type="primary" @click="postData()">
                        登录
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>


</template>
<script setup>
    import {
        ref,
        reactive,
        getCurrentInstance
    } from 'vue'

    import {
        ElNotification,
        ElMessage
    } from 'element-plus'

    // 导入用户pinia
    import {
        useUserStore
    } from '@/stores/user'

    // 用户pinia
    const userStore = useUserStore()

    // 监听pinia用户信息
    userStore.$subscribe((mutation, state) => {
        if (state.userInfo.id) {
            showLoading.value = false
        }
    })

    // 显示登录
    let showLoading = ref(false)
    if (userStore.userInfo.id) {
        showLoading.value = false
    } else {
        showLoading.value = true
    }

    // 获取自定义方法
    const UTILS = getCurrentInstance().appContext.config.globalProperties.$utils

    // el 图标
    import {
        UserFilled
    } from '@element-plus/icons-vue'

    // 控制表单显示
    let isShowForm = ref(false)
    let loginLoading = ref(false)

    // 登录表单数据
    let loginForm = reactive({
        mailbox: "", //邮箱
        password: "" //密码
    })

    // 表单校验
    const loginRules = reactive({
        mailbox: [{
                required: true,
                message: '请输入邮箱',
                trigger: 'blur'
            },
            {
                type: 'email',
                message: '请输入正确的邮箱地址',
                trigger: ['blur']
            }
        ],
        password: [{
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            },
            {
                min: 6,
                max: 16,
                message: '长度在 6 到 16 个字符',
                trigger: ['blur', 'change']
            }
        ]
    })
    const loginFormRef = ref(null)

    // 提交登录数据函数
    const postData = () => {
        loginLoading.value = true
        loginFormRef.value.validate(valid => {
            if (valid) {
                // 设置登录数据
                const data = Object.assign({}, loginForm)
                data.password = UTILS.md5(data.password)
                userStore.Login(data).then(res => {
                    if (res) {
                        userStore.UserInfo().then(res => {
                            ElNotification({
                                title: '登录成功',
                                message: `欢迎回来，${userStore.userInfo.nickname}`,
                                type: 'success',
                            })
                            loginLoading.value = false
                            resetForm()
                        })
                    } else {
                        loginLoading.value = false
                        ElNotification({
                            title: '登录失败',
                            message: '接口未响应',
                            type: 'error',
                        })
                    }
                })
            } else {
                loginLoading.value = false
                console.log("登录失败");
            }
        })

    }

    const resetForm = () => {
        isShowForm.value = false
        loginFormRef.value.resetFields()
    }

    const showForm = () => {
        ElMessage({
            message: '测试版本暂不开放登录功能',
            type: 'info',
            plain: true,
        })
        // isShowForm.value = true
    }
</script>